<?php
	global $res;
	(is_numeric($res[1])) ? $page = strip_tags($res[1]) : $page = 1;
	$numrec = NUMREC;
	$perpage = PAGE;	//jumlah record yang ditampilkan perhalaman
	$defshow = DEFSHOW;
	if ($page!=0)
		$piro=($page-1)*$perpage;
	else
		$piro = 0;
?>
<div id="gallery">
    <div id="controls" class="controls"></div>
    <div id="loading" class="loader"></div>
    <div id="slideshow" class="slideshow" align="center"></div>
    <div id="caption" class="embox"></div>
</div>
<div id="thumbs" class="navigation">
    <ul class="thumbs noscript">
<?php
	$sqlZ = "SELECT idx,data,tipe FROM tbl_upload WHERE RIGHT(`data`,2)='FG' ORDER BY tanggal DESC";
	$qryZ = mysql_query($sqlZ);
	while ($rowZ = mysql_fetch_object($qryZ)) {
		if ($rowZ->idx!="") {
			$nama = explode('[spasi]',$rowZ->data);
?>
        <li>
        	<a class="thumb" href="http://<?php echo $_SERVER['HTTP_HOST'].DIR_PATH; ?>data/galeri/<?php echo "FG".$nama[0].".".$rowZ->tipe; ?>" title="<?php echo $nama[1]; ?>"><img src="http://<?php echo $_SERVER['HTTP_HOST'].DIR_PATH; ?>data/galeri/<?php echo "FG".$nama[0].".".$rowZ->tipe; ?>" alt="<?php echo $nama[1]; ?>" /></a>
            <div class="caption">
                <div class="download">
                    <a href="<?php echo DIR_PATH; ?>data/galeri/<?php echo "FG".$nama[0].".".$rowZ->tipe; ?>">Download Original</a>
                </div>
                <div class="image-title"><?php echo $nama[1]; ?></div>
                <div class="image-desc"><?php echo $nama[3]; ?></div>
            </div>
        </li>
<?php
		}
	}
?>
    </ul>
</div>
<script type="text/javascript">
			// We only want these styles applied when javascript is enabled
			$('div.navigation').css({'width' : '100%', 'margin' : '10px'});
			// Initially set opacity on thumbs and add
			// additional styling for hover effect on thumbs
			var onMouseOutOpacity = 0.67;
			$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
				.hover(
					function () {
						$(this).not('.selected').fadeTo('fast', 1.0);
					}, 
					function () {
						$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
					}
				);
			$('#thumbs img').css({'width' : '66px', 'height' : '76px'});

			$(document).ready(function() {
				// Initialize Advanced Galleriffic Gallery
				var galleryAdv = $('#gallery').galleriffic('#thumbs', {
					delay:                  2000,
					numThumbs:              <?php echo PAGE; ?>,
					preloadAhead:           10,
					enableTopPager:         true,
					enableBottomPager:      false,
					imageContainerSel:      '#slideshow',
					controlsContainerSel:   '#controls',
					captionContainerSel:    '#caption',
					loadingContainerSel:    '#loading',
					renderSSControls:       true,
					renderNavControls:      true,
					playLinkText:           'Play Slideshow',
					pauseLinkText:          'Pause Slideshow',
					prevLinkText:           '&lsaquo; Foto Sebelumnya',
					nextLinkText:           'Foto selanjutnya &rsaquo;',
					nextPageLinkText:       '&rsaquo;&rsaquo;',
					prevPageLinkText:       '&lsaquo;&lsaquo;',
					enableHistory:          true,
					autoStart:              false,
					onChange:               function(prevIndex, nextIndex) {
						$('#thumbs ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onTransitionOut:        function(callback) {
						$('#caption').fadeTo('fast', 0.0);
						$('#slideshow').fadeTo('fast', 0.0, callback);
					},
					onTransitionIn:         function() {
						$('#slideshow').fadeTo('fast', 1.0);
						$('#caption').fadeTo('fast', 1.0);
					},
					onPageTransitionOut:    function(callback) {
						$('#thumbs ul.thumbs').fadeTo('fast', 0.0, callback);
					},
					onPageTransitionIn:     function() {
						$('#thumbs ul.thumbs').fadeTo('fast', 1.0);
					}
				});
			});
		</script>